<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">电影信息列表</div>
        <div class="layui-card-body movieList ">
          
          <!-- 查询层 -->
          <div class="layui-row">
				    <div class="layui-col-md9">
				      
				      <div class="layui-inline">
					    <label class="layui-form-label">电影名称</label>
					    <div class="layui-input-inline" style="width: 380px;">
					      <input type="text" v-on:keyup="changeMovieName" value="{{movieName}}" id="movieName" name="movieName" placeholder="" autocomplete="off" class="layui-input">
					    </div>
					    
					     
					      
					  </div> 
				      
				      
					 </div>   
				    <div class="layui-col-md3">
				      <button v-on:click="loadData" class="layui-btn layui-btn-normal">查询</button>
				    </div>
				  </div>
				  
				  
				  <!-- 列表层 -->
				  <table class="layui-table">
					  <colgroup>
					    <col width="50">
					    <col width="200">
					    <col width="120">
					    <col width="120">
					    <col width="100">
					    <col width="150">
					    <col width="80">
					    <col width="60">
					    <col width="220">
					    <col width="580">
					    <col width="180">
					  </colgroup>
					  <thead>
					    <tr>
					      <th>ID</th>
					      <th>电影名称</th>
					      <th>导演</th>
					      <th>时长</th>
					      <th>语言</th>
					      <th>上映日期</th>
					      <th>票房</th>
					      <th>票价</th>
					      <!-- <th>场次</th> -->
					      <!-- <th>放映厅</th> -->
					      <th>属性</th>
					      <th>操作</th>
					    </tr> 
					  </thead>
					  <tbody>
					  	
					    <tr v-for="item in dataSource">
					      <td>{{item.id}}</td>
					      <td>{{item.moviename}}</td>
					      <td>{{item.director}}</td>
					      <td>{{item.time}}</td>
					      <td>{{item.language}}</td>
					      <td>{{item.publishdate}}</td>
					      <td>{{item.boxoffice}}</td>
					      <td>{{item.ticketprice}}</td>
					      <td>
					      	<button style="height:30px;margin-bottom:8px;text-align:center;line-height:30px;" v-on:click="updateData" data-mid="{{item.id}}" data-type="jrpf" class="layui-btn layui-btn-normal">今日票房</button>
					      	<button style="height:30px;margin-bottom:8px;text-align:center;line-height:30px;" v-on:click="updateData" data-mid="{{item.id}}" data-type="hprc" class="layui-btn layui-btn-normal">好评如潮</button>
					      	<button style="height:30px;margin-bottom:8px;text-align:center;line-height:30px;" v-on:click="updateData" data-mid="{{item.id}}" data-type="zsqd" class="layui-btn layui-btn-normal">最受期待</button>
					      </td>
					      <td>
					      	<button style="width:60px;height:30px;text-align:center;line-height:30px;" v-on:click="removeData" data-id="{{item.id}}" class="layui-btn layui-btn-danger">移除</button>
					      	<button style="width:60px;height:30px;text-align:center;line-height:30px;" v-on:click="modifyData" data-id="{{item.id}}" class="layui-btn layui-btn-normal">修改</button>
					      </td>
					    </tr>
					    
					  </tbody>
					</table>
					
					<div id="laypageDemo"></div>
				  
         
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 脚本 -->
<script>
	var $ = layui.jquery;
	var vm = new Vue({
		el : '.movieList' ,
		data : {
			
			movieName : '',
			
			dataSource : [{}]
		} ,
		
		methods: {
			
			updateData : function(e){
				var mid = e.target.dataset.mid;
				var column = e.target.dataset.type;
				this.$http({
                    url:'movie/update.do?id=' + mid + "&column=" + column,
                    data:{
                    	
                    }
                }).then(function(res){
					var data = res.data;
					if(data.code != 0){
						alert("后台出现错误，请核实！");
						return;
					}
					alert('属性变更成功！');
					location.reload();
                });
			}
			
			,modifyData : function(e){
				location.href = '/#/movie/add?/id=' + e.target.dataset.id;
			}
			
			,removeData : function(e){
				
				if(!confirm('您确定要删除吗？')){
					return;
				}
				
				this.$http({
                    url:'movie/delete.do?id=' + e.target.dataset.id,
                    data:{
                    	
                    }
                }).then(function(res){
					var data = res.data;
					if(data.code != 0){
						alert("后台出现错误，请核实！");
						return;
					}
					alert('删除成功！');
					location.reload();
                });
			}
			
			,loadData : function(page,rows){
				var moviename = $('#movieName').val();
				
				page = page ? page : 1;
				rows = rows ? rows : 5
				
				this.$http({
                    url:'movie/list.do',
                    data:{
                    	moviename : moviename,
                    	page : page,
                    	rows : rows,
                    }
                }).then(function(res){

					var data = res.data;
					
					//渲染数据
					vm.dataSource = data.rows;
					//计算分页
                    layui.use('laypage', function(){
              		  var laypage = layui.laypage;
              		  
              		  //执行一个laypage实例
              		  laypage.render({
              		    elem: 'laypageDemo' //注意，这里的 test1 是 ID，不用加 # 号
              		    ,count: data.total //数据总数，从服务端得到
              		    ,limit: 5
              		    ,curr : page
	              		,jump: function(obj, first){
	              		    //obj包含了当前分页的所有参数，比如：
	              		    //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
	              		    //console.log(obj.limit); //得到每页显示的条数
	              		    
	              		    //首次不执行
	              		    if(!first){
	              		      //do something
	              		      vm.loadData(obj.curr,obj.limit);
	              		      
	              		    }
	              		  	
	              		    
	              		    
	              		  }
              		  });
              		});
                   
                });
				
			} ,
			
			changeMovieName : function(e){
				console.log(e.target.value);
				vm.movieName = e.target.value;
			}
			
		}
	});
	
	vm.loadData();
	
	
	
  
</script>
<!-- 样式 -->
<style scoped>

</style>